<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>编解码能力测试</title>
</head>
<body>
  <input id="radio_encoder" type="radio" name="222" />编码 <input id="radio_decoder" type="radio" name="222"/>解码<br/>
  编解码器<select id="codec_select"></select>
  分辨率: <input id="input_width" style="width: 70px;" />x<input id="input_height" style="width: 70px"/>
  <input id="radio_hardware" type="radio" name="111" />硬件 <input id="radio_software" type="radio" name="111"/>软件 <input id="radio_none" type="radio" name="111"/>不指定
  <button id="checkBtn">检测</button>
  <textarea id="log" readonly style="width: 100%; height: 400px; overflow-y: auto;" contenteditable="true"></textarea>
  <script>
    const radio_encoder = document.getElementById("radio_encoder");
    const radio_decoder = document.getElementById("radio_decoder");
    const checkBtn = document.getElementById("checkBtn");
    const log = document.getElementById("log");
    const input_width = document.getElementById("input_width");
    const input_height = document.getElementById("input_height");
    const codec_select = document.getElementById("codec_select");
    const radio_hardware = document.getElementById("radio_hardware");
    const radio_software = document.getElementById("radio_software");
    const radio_none = document.getElementById("radio_none");

    const codecArray = [{label: "VP8",value: "vp8"}, 
      {label: "VP9", value: "vp09.00.10.08.01.02.02.02.00"},  // vp9 profile-id:0
      {label: "H264", value: "avc1.42001f"}, 
      {label: "AV1", value: "av01.0.04M.08"}];


    checkBtn.addEventListener("click", () => {
      let hardwareAcceleration = "no-preference";
      if (radio_hardware.checked) {
        hardwareAcceleration = "prefer-hardware";
      } else if (radio_software.checked) {
        hardwareAcceleration = "prefer-software";
      }
      const config = {
        codec: codec_select.value,
        codedWidth: parseInt(input_width.value, 10),
        codedHeight: parseInt(input_height.value, 10),
        hardwareAcceleration,
      }

      if (radio_encoder.checked) {
        VideoEncoder.isConfigSupported(config).then((res) => {
          if (res.supported) {
            appendLog("支持当前配置");
          } else {
            appendLog("不支持当前配置");
          }
        })
      } else if (radio_decoder.checked) {
        VideoDecoder.isConfigSupported(config).then((res) => {
        if (res.supported) {
          appendLog("支持当前配置");
        } else {
          appendLog("不支持当前配置");
        }
      })
      }
      
    })

    if (window.VideoDecoder) {
      getSupportCodecArray();
      input_width.value = 640;
      input_height.value = 480;
      radio_none.setAttribute("checked", "checked");
    } else {
      appendLog("当前页面不支持VideoDecoder");
    }

    function appendLog(str) {
      log.value += str + "\r\n";
      log.scrollTop = log.scroolHeight;
    }

    async function getSupportCodecArray() {
      let arr = [];
      for (let i = 0; i < codecArray.length; ++i) {
        let res = await VideoDecoder.isConfigSupported({codec: codecArray[i].value, codedWidth: 640, codedHeight: 480});
        if (res && res.supported) {
          codec_select.add(new Option(codecArray[i].label, codecArray[i].value))
        }
        console.log(res);
      }
    }
  </script>
</body>

